<template>
	<view>
		<image :src="user.background" mode="" class="top_bg"></image>
		<view class="topbar dis_f_sb_c">
			<image src="../../static/icon/back2.png" mode="" @click="back"></image>
			<view @click="add_img">更换背景</view>
		</view>
		<view class="content">
			<view class="gr_zy dis_f_co">
				<image class="tx" :src="user.avatar" mode=""></image>
				<view class="dis_f_l_c top_info">
					<view class="username">{{user.name}}</view>
					<image class="sex" v-if="user.sex == 1" src="../../static/mine/man.png" mode=""></image>
					<image class="sex" v-else src="../../static/mine/women.png" mode=""></image>
					<view class="bj_btn dis_f_c_c" @click="go_sz">编辑</view>
					<view class="h_text" style="margin-right: 36rpx;">已加入 {{user.das}}天</view>
					<view class="h_text dis_f_l_c">
						<image src="../../static/mine/jrzt.png" mode=""></image>
						<view>{{user.jump}}</view>
					</view>
				</view>
				<view style="margin-bottom: 24rpx;width: 100%;">
					<u-tabs :list="list" bg-color="none" active-color="#222222" bar-width="375" bar-height="4" inactive-color="#BBBBBB" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
			</view>
			<view v-if="current ==0" class="mine">
				<view class="about dis_f_sb_c">
					<view class="dis_f_co_c_c" style="width: 169rpx;border-right: 2rpx solid #EEE;">
						<view class="num">{{user.quan}}</view>
						<view class="a_text">动态</view>
					</view>
					<view class="dis_f_co_c_c" style="width: 169rpx;border-right: 2rpx solid #EEE;">
						<view class="num">{{user.follow}}</view>
						<view class="a_text">关注</view>
					</view>
					<view class="dis_f_co_c_c" style="width: 169rpx;border-right: 2rpx solid #EEE;">
						<view class="num">{{user.gift}}</view>
						<view class="a_text">礼物</view>
					</view>
					<view class="dis_f_co_c_c" style="width: 169rpx;border-right: 2rpx solid #EEE;">
						<view class="num">{{user.fans}}</view>
						<view class="a_text">粉丝</view>
					</view>
				</view>
			</view>
			<!-- 我的动态 -->
			<view v-if="current ==1" >
				<view v-for="(item,index) in quan" class="wd_dt dis_f_co">
					<view class="dis_f_l_c"  style="margin-bottom: 30rpx;">
						<image class="tx" :src="item.user.avatar" mode=""></image>
						<view class="dis_f_co">
							<view class="title">{{item.user.name}}</view>
							<view class="sign">{{item.user.sign}}</view>
						</view>
						
					</view>
					<view class="dt_text">{{item.content}}</view>
					<view class="dis_f_l_c dis_f_w dt_img">
						<image v-if="item.type ==2" :src="item.video_pic" mode="" @click.stop="previewVideo(item.pic[0])"></image>
						<image v-for="(items,indexs) in item.pic" :src="items" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '关于我'
				}, {
					name: '我的动态'
				}, ],
				current: 0,
				show:true,
				user:[],
				quan:[]
			};
		},
		onLoad(e) {
			this.getuser(e.uid)
			this.getquan(e.uid)
			if(e.uid != uni.getStorageSync('uid')){
				this.list=[{
					name: '关于ta'
				}, {
					name: 'ta的动态'
				}, ]
			}
			},
		methods:{
			getquan(e){
				this.$.ajax(1, 'post', 'index/getquan', {
					uid:e,
					// token:uni.getStorageSync('token'),
					status:1
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.quan = res.list
					}
				})
			}, 
			getuser(e){
				this.$.ajax(1, 'post', 'index/getuser', {
				uid:e,
				// token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 1){
					this.user = res.userinfo
					}
					
				})
			},
			go_sz(){
				this.$.ajax(1, 'post', 'index/checktokens', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token')
					}, (res) => {
						console.log(res)
						if(res.code == 9){
							this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
						}
						else{
							this.$.open('/pages/mine/she_zhi')
						}
					})
				
			},
			back(){
				this.$.back()
			},
			add_img(){
				var that = this
				this.$.add_img(1, this.uid, (res) => {
					this.$.ajax(1, 'post', 'index/setuser', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
						type:10,
						content:res.id
					}, (res) => {
						console.log(res)
						if(res.code == 1){
						this.getuser(uni.getStorageSync('uid')) 
						}
						
					})     
				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	.content{
		position: absolute;
		top:calc(var(--status-bar-height) + 710rpx);
		z-index: 9999;
		padding: 52rpx 24rpx 0 24rpx;
		width: 100%;
		// background-color: #FFFFFF;
	}
	.top_bg{
		width: 100%;
		height: 750rpx;
		position: absolute;
		z-index: 1;
	}
	.topbar{
		width: 750rpx;
		position: absolute;
		top:calc(var(--status-bar-height) + 18rpx);
		z-index: 999;
		padding: 0 48rpx;
		color: #fff;
		image{
			width: 20rpx;
			height: 33.79rpx;
		}
	}
	.gr_zy{
		// position: absolute;
		// top: 600rpx;
		.tx{
			width: 144rpx;
			height: 144rpx;
			border-radius: 10rpx;
			margin-bottom: 14rpx;
			position: absolute;
			top:-92rpx;
		}
		.top_info{
			width: 100%;
			margin-bottom: 38rpx;
			.username{
				font-size: 34rpx;
				line-height: 48rpx;
				margin-right: 12rpx;
				color: #222222;
			}
			.sex{
				width: 30rpx;
				height: 30rpx;
				margin-right: 44rpx;
			}
			.bj_btn{
				width: 104rpx;
				height: 48rpx;
				color: #7ADEEC;
				font-size: 22rpx;
				line-height: 48rpx;
				border-radius: 24rpx;
				border: 2rpx solid #7ADEEC;
				margin-right: 36rpx;
			}
			.h_text{
				font-size: 22rpx;
				line-height: 32rpx;
				color: #BBBBBB;
				image{
					width: 21.53rpx;
					height: 21.53rpx;
					margin-right: 6rpx;
				}
			}
		}
	}
	.wd_dt{
		width: 750rpx;
		
		padding: 36rpx 24rpx;
		margin-bottom: 12rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
		.tx{
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}
		.title{
			font-size: 28rpx;
			line-height: 40rpx;
			margin-bottom: 6rpx;
		}
		.sign{
			font-size: 22rpx;
			color: #BBBBBB;
			line-height: 32rpx;
		}
		.dt_text{
			width: 100%;
			font-size: 22rpx;
			line-height: 33rpx;
			color: #222;
			margin-bottom: 24rpx;
		}
		.dt_img{
			
			image{
				width: 204rpx;
				height: 204rpx;
				border-radius: 10rpx;
				margin-right: 12rpx;
				margin-bottom: 12rpx;
			}
		}
		
	}
	.mine{
		// position: fixed;
		// top: 1020rpx;
		// z-index: 999;
		.about{
			width: 100%;
			// padding: 34rpx 72rpx;
			
			.num{
				font-size: 28rpx;
				font-weight: bold;
				line-height: 40rpx;
				color: #E23C63;
				margin-bottom: 12rpx;
			}
			.a_text{
				font-size: 24rpx;
				color: #777777;
				line-height: 34rpx;
			}
		}
	}

</style>
